<template>
	<div class="box">
		<div class="box-left" style="color: white">
			<!--{{ store.chinaAdd }}
			{{ store.chinaTotal }}-->
			<div class="box-left-card">
				<section>
					<div>较上日+ {{ store.chinaAdd.localConfirmH5 }}</div>
					<div>{{ store.chinaTotal.localConfirm }}</div>
					<div>
						本土现有确诊
					</div>
				</section>
				<section>
					<div>较上日+ {{ store.chinaAdd.nowConfirm }}</div>
					<div>{{ store.chinaTotal.nowConfirm }}</div>
					<div>
						现有确诊
					</div>
				</section>
				<section>
					<div>较上日+ {{ store.chinaAdd.confirm }}</div>
					<div>{{ store.chinaTotal.confirm }}</div>
					<div>
						累计确诊
					</div>
				</section>
				<section>
					<div>较上日+ {{ store.chinaAdd.noInfect }}</div>
					<div>{{ store.chinaTotal.noInfect }}</div>
					<div>
						无症状感染者
					</div>
				</section>
				<section>
					<div>较上日+ {{ store.chinaAdd.importedCase }}</div>
					<div>{{ store.chinaTotal.importedCase }}</div>
					<div>
						境外输入
					</div>
				</section>
				<section>
					<div>较上日+ {{ store.chinaAdd.dead }}</div>
					<div>{{ store.chinaTotal.dead }}</div>
					<div>
						累计死亡
					</div>
				</section>
			</div>
			<div class="box-left-pie"></div>
			<div class="box-left-line"></div>
		</div>
		<div id="chinaMap" class="box-center"></div>
		<div class="box-right" style="color: white">
			<table border="1" cellspacing="0" class="table">
				<thead>
				<tr>
					<th>地区</th>
					<th>新增确诊</th>
					<th>累计确诊</th>
					<th>治愈</th>
					<th>死亡</th>
				</tr>
				</thead>
				<transition-group tag="tbody" enter-active-class="animate__animated animate__flipInY">
					<tr v-for="(item,index) in store.item" :key="item.name + index">
						<td align="center">{{ item.name }}</td>
						<td align="center">{{ item.today.confirm }}</td>
						<td align="center">{{ item.total.confirm }}</td>
						<td align="center">{{ item.total.heal }}</td>
						<td align="center">{{ item.total.dead }}</td>
					</tr>
				</transition-group>
			</table>
		</div>
	</div>
</template>

<script lang="ts" setup>
import {useCounterStore} from "@/stores";
import {onMounted} from "vue";
import './assets/china'
import 'animate.css'
import {initMap, initLint, initPie} from './initChartsMethods'

const store = useCounterStore();

onMounted(async () => {
	await store.getList();
	initMap()
	initPie()
	initLint()
})
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}

$itemColor: #41b0db;
$itemBg: #223651;
$itemBorder: #212028;

html, body, #app {
	height: 100%;
	overflow: hidden;
}

.box {
	height: 100%;
	display: flex;
	background: url("./assets/bg.jpg") no-repeat;
	background-size: cover;
	overflow: hidden;
	padding: 8px;
	
	&-left {
		width: 400px;
		
		&-card {
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto;
			
			section {
				background: $itemBg;
				border: 1px solid $itemBorder;
				padding: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				div:nth-child(2) {
					color: $itemColor;
					padding: 10px 0;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}
		
		&-pie, &-line {
			height: 320px;
			margin-top: 20px;
		}
		
	}
	
	&-center {
		flex: 1;
	}
	
	&-right {
		width: 400px;
	}
}

.table {
	width: 100%;
	background: #212028;
	
	tr {
		th {
			padding: 4px;
			white-space: normal;
		}
		
		td {
			padding: 5px 10px;
			width: 100px;
			white-space: normal;
		}
	}
}
</style>
